<!--
 * @Descripttion: 统计数值组件
 * @version: 1.1
 * @Author: sakuya
 * @Date: 2021年6月23日13:11:32
 * @LastEditors: sakuya
 * @LastEditTime: 2022年5月14日19:55:09
-->

<template>
	<div class="sc-statistic clearfix">
		<div :class="bgclass">
			<div :class="bgimg"></div>
		</div>

		<div class="divCotent">
			<span class="sctitle">{{title}}</span>
			<br/>
            <span :class="valueclass">{{value}}</span>
		</div>
	</div>

</template>

<script>
	export default {
		props: {
			title: { type: String, required: true, default: "" },
			value: { type: Number, required: true, default: 0 },
			bgimg:{ type: String, default: "bgimg1" },
			bgclass:{ type: String, default: "bg1" },
			valueclass:{ type: String, default: "value1" },

		},
		data() {
			return {

			}
		},
		computed: {
			cmtValue(){
				return this.groupSeparator ? this.$TOOL.groupSeparator(this.value) : this.value
			}
		}
	}
</script>

<style scoped>
	.sc-statistic{
	width: 256px;
	background-color: rgba(255, 255, 255, 1);
	height: 120px;
  border-radius: 8px;}

	.sc-statistic:hover{
/* 当鼠标悬停在元素上时改变元素的样式 */
}
	.sc-statistic-title {font-size: 12px;color: #999;margin-bottom: 10px;display: flex;align-items:
		 center;margin-left: 20px;margin-right: 20px;}
	.sc-statistic-tips {margin-left: 5px;}
	.sc-statistic-content {font-size: 20px;color: #333;margin-left: 20px;margin-right: 20px;}
	.sc-statistic-content-value {font-weight: 400;}
	.sc-statistic-content-prefix {margin-right: 5px;}
	.sc-statistic-content-suffix {margin-left: 5px;font-size: 12px;}
	.sc-statistic-description {margin-top: 10px;color: #999;}

	.dark .sc-statistic-content {color: #d0d0d0;}

	.img-bg{
		width: 15.6667%;
    position: absolute;
    height: 30px;
    top:90%;
	margin-bottom: 0px;
	margin-top: -20PX;
	border-radius: 7px;

}
.divCotent {
  width: 97px;
  height: 51px;
  margin: 26px 0 0 12px;
  float: left;
}
.sctitle{
	width: 97px;
  height: 18px;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 14px;
  font-family: PingFangSC-Semibold;
  font-weight: 400;
  text-align: left;
  white-space: nowrap;
  line-height: 30px;
}

.value1{
	width: 43px;
  height: 19px;
  overflow-wrap: break-word;
  color: rgba(80, 2, 255, 1);
  font-size: 24px;
  font-family: PingFangSC-Semibold;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  line-height: 30px;
  margin-top: 14px;
}
.value2{
	width: 25px;
  height: 19px;
  overflow-wrap: break-word;
  color: rgba(53, 40, 253, 1);
  font-size: 24px;
  font-family: PingFangSC-Semibold;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  line-height: 30px;
  margin-top: 14px;
}
.value3{
	width: 56px;
  height: 18px;
  overflow-wrap: break-word;
  color: #0244D6;
  font-size: 24px;
  font-family: PingFangSC-Semibold;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  line-height: 30px;
  margin-top: 14px;
}
.value4{
	width: 56px;
  height: 18px;
  overflow-wrap: break-word;
  color: #E64802;
  font-size: 24px;
  font-family: PingFangSC-Semibold;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  line-height: 30px;
  margin-top: 14px;
}
.value5{
	width: 42px;
  height: 11px;
  overflow-wrap: break-word;
  color: rgba(147, 1, 225, 1);
  font-size: 24px;
  font-family: PingFangSC-Semibold;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  line-height: 30px;
  margin-top: 22px;
}
.value6{
	width: 27px;
  height: 11px;
  overflow-wrap: break-word;
  color: rgba(147, 1, 225, 1);
  font-size: 24px;
  font-family: PingFangSC-Semibold;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  line-height: 30px;
  margin-top: 22px;
}
.bg1{
/*
  background-image: linear-gradient(
    218deg,
    rgba(243, 237, 255, 1) 0,
    rgba(243, 237, 255, 1) 0,
    rgba(244, 240, 253, 1) 100%,
    rgba(244, 240, 253, 1) 100%
  );
  */
  border-radius: 6px;
  height: 68px;
  width: 68px;
  margin: 26px 0 0 32px;
  float: left;


}

.bg2 {
  /*
  background-image: linear-gradient(
    218deg,
    rgba(233, 243, 254, 1) 0,
    rgba(233, 243, 254, 1) 0,
    rgba(236, 233, 253, 1) 100%,
    rgba(236, 233, 253, 1) 100%
  );
   */
  border-radius: 6px;
  height: 68px;
  width: 68px;
  margin: 26px 0 0 32px;
  float: left;
}

.bg3 {
   /*
	background-image: linear-gradient(
    210deg,
    rgba(226, 238, 253, 1) 0,
    rgba(226, 238, 253, 1) 0,
    rgba(254, 242, 237, 1) 100%,
    rgba(254, 242, 237, 1) 100%
  );
   */
  border-radius: 6px;
  height: 68px;
  width: 68px;
  margin: 26px 0 0 32px;
  float: left;
}

.bg4 {
  /*
	background-image: linear-gradient(
    218deg,
    rgba(253, 237, 230, 1) 0,
    rgba(253, 237, 230, 1) 0,
    rgba(254, 239, 210, 1) 100%,
    rgba(254, 239, 210, 1) 100%
  );
  */
  border-radius: 6px;
  height: 68px;
  width: 68px;
  margin: 26px 0 0 32px;
  float: left;
}

.bg5 {
  /*
	background-image: linear-gradient(
    218deg,
    rgba(254, 239, 209, 1) 0,
    rgba(254, 239, 209, 1) 0,
    rgba(253, 243, 238, 1) 100%,
    rgba(253, 243, 238, 1) 100%
  );
  */
  border-radius: 6px;
  height: 68px;
  width: 68px;
  margin: 26px 0 0 32px;
  float: left;
}

.bg6 {
   /*
	background-image: linear-gradient(
    218deg,
    rgba(249, 233, 255, 1) 0,
    rgba(249, 233, 255, 1) 0,
    rgba(252, 245, 255, 1) 100%,
    rgba(252, 245, 255, 1) 100%
  );
  */
  border-radius: 6px;
  height: 68px;
  width: 68px;
  margin: 26px 0 0 32px;
  float: left;
}

.bgimg1{
	width: 38px;
  height: 38px;
  background: url(../../../public/img/homedrk.png)
    100% no-repeat;
  background-size: 100% 100%;
  margin: 15px 0 0 15px;
}

.bgimg2{
	width: 38px;
  height: 38px;
  background: url(../../../public/img/homezyz.png)
    100% no-repeat;
  background-size: 100% 100%;
  margin: 15px 0 0 15px;
}

.bgimg3{
	width: 38px;
  height: 38px;
  background: url(../../../public/img/homedb.png)
    100% no-repeat;
  background-size: 100% 100%;
  margin: 15px 0 0 15px;
}

.bgimg4{
	width: 38px;
  height: 38px;
  background: url(../../../public/img/homebf.png)
    100% no-repeat;
  background-size: 100% 100%;
  margin: 15px 0 0 15px;
}

.bgimg5{
	width: 38px;
  height: 38px;
  background: url(../../../public/img/homecs.png)
    100% no-repeat;
  background-size: 100% 100%;
  margin: 15px 0 0 15px;
}

.bgimg6{
	width: 38px;
  height: 38px;
  background: url(../../../public/img/homeyc.png)
    100% no-repeat;
  background-size: 100% 100%;
  margin: 15px 0 0 15px;
}
@media (min-width: 1600px)and (max-width: 1680px) {
	.bg2,.bg3,.bg4,.bg5,.bg6,
	.bg1{
		margin-left:20px;
	}
}
@media (min-width: 1200px) and (max-width: 1600px){
	.divCotent{
		margin-top:10px;
	}
	.bg2,.bg3,.bg4,.bg5,.bg6,
	.bg1{
		width:50px;
		height:50px;
		display:flex;
		justify-content: center;
		align-items: center;
		margin-left:15px;
		margin-top:15px;
	}
	.bgimg2,.bgimg3,.bgimg4,.bgimg5,.bgimg6,
	.bgimg1{
		width:28px;
		height:28px;
		margin:0;
	}
	.sctitle{
		font-size:14px;
	}
	.sc-statistic{
		height:80px;
	}
	.value1,.value2,.value3,.value4,.value5,.value6{font-szie:20px;}
}
</style>
